<template>
  <div>
    <div class="clock">
      <div class="date-warp">
        <p class="date">{{nowTimes.yy}}-{{nowTimes.mm}}-{{nowTimes.dd}} {{weekDay}}</p>
      </div>
      <div class="time-warp">
        <p class="time">{{nowTimes.hou}}:{{nowTimes.min}}:{{nowTimes.sec}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "currentDateTime",
  data() {
    return {
      timer: "",
      nowTimes: {
        yy: 0,
        mm: 0,
        dd: "00",
        hou: "00",
        min: "00",
        sec: "00"
      },
      weekDay: ""
    };
  },
  methods: {
    getWeekDay(num) {
      let day = "";
      switch (num) {
        case 0:
          day = "星期天";
          break;
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
      }
      return day;
    },
    setNowTimes() {
      let myDate = new Date();
      this.nowTimes.yy = myDate.getFullYear();
      this.nowTimes.mm = myDate.getMonth() + 1;
      this.nowTimes.dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      this.nowTimes.hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      this.nowTimes.min = String(
        myDate.getMinutes() < 10? "0" + myDate.getMinutes(): myDate.getMinutes()
      );
      this.nowTimes.sec = String(
        myDate.getSeconds() < 10? "0" + myDate.getSeconds(): myDate.getSeconds()
      );
    }
  },
  created() {
    let myDate = new Date();
    this.weekDay = this.getWeekDay(myDate.getUTCDay());
    this.setNowTimes();
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style>
.clock {
  font-family: "Share Tech Mono", monospace;
  color: #25a9da;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
.date-warp {
    text-align: center;
}
.date {
  font-size: 24px;
  letter-spacing: 0.1em;
}
.time-warp {
    margin-top: 20px;
    text-align: center;
}
.time {
  letter-spacing: 0.05em;
  font-size: 45px;
  padding: 5px 0;
}
</style>